<script setup lang="ts">
import { ref, computed } from 'vue'
// 引入子组件
import Account from '@/views/account.vue'
import DownloadManage from '@/views/download.vue'

const activeMenu = ref('account') // 当前激活的菜单

// 根据菜单切换组件
const currentComponent = computed(() => {
  return activeMenu.value === 'account' ? Account : DownloadManage
})

// 菜单切换事件
const handleMenuSelect = (key) => {
  activeMenu.value = key
}
</script>

<template>
  <!-- 整体布局 -->
  <el-container style="height: 100vh;">
    <!-- 左侧导航栏 -->
    <el-aside width="220px" style="background: #2f4050;">
      <el-menu
          default-active="account"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
          background-color="#2f4050"
          text-color="#fff"
          active-text-color="#ffd04b"
      >
        <el-menu-item index="account">
          <el-icon><User /></el-icon>
          <span>账户</span>
        </el-menu-item>
        <el-menu-item index="download">
          <el-icon><Download /></el-icon>
          <span>下载</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区 -->
    <el-container>
      <el-main style="padding: 20px;">
        <!-- 动态切换组件 -->
        <component :is="currentComponent" />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>

</style>